<template>
    <div class="addContract">
        <div>
            <van-cell-group style="text-align:left">
                <van-field 
                    v-model="form.fcontractcode" 
                    label="合同文件编号:" 
                    readonly 
                    label-class='fw'
                    placeholder="请输入合同文件编号"
                />
                <van-field v-model="form.fcontractname" label="合同名称:"  label-class='fw'  placeholder="请输入合同名称"/>
                <van-field v-model="form.fsamplereportcode" label="样品委托单编号:"  readonly label-class='fw lang'/>
                <van-field
                    label-class='fw'
                    name="检验类别"
                    v-model="form.fchecktypename"
                    label="检验类别:"
                    @click="showFdeptClick"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.检验类别')"
                    :error-message="errors.first('registerForm.检验类别')"
                    required
                    readonly
                    is-link
                    placeholder="请选择检验类别">
                </van-field>
                <van-popup 
                    v-model="showFdept" 
                    get-container="body" 
                    position='bottom'
                >
                    <van-picker 
                        title='请选择检验类别' 
                        :columns="columns"
                        show-toolbar
                        value-key='fname'
                        @cancel="onCancel4fdeptname"
                        @confirm="onConfirm4fdeptname"
                     />
                </van-popup>
                <van-field 
                    label-class='fw' 
                    v-model="form.fdeptname_cus" 
                    label="委托单位:" 
                    required
                    name="委托单位"
                    v-validate="'required'"
                    placeholder="请输入委托单位"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.委托单位')"
                    :error-message="errors.first('registerForm.委托单位')"
                />
                <van-field label-class='fw' v-model="form.fdeptprovince_cus" label="省份:"  placeholder="请输入省份"/>
                <van-field label-class='fw'  v-model="form.fdepttrade_cus" label="所属行业:" placeholder="请输入所属行业"/>
                <van-field label-class='fw'  v-model="form.fdeptadd_cus" label="委托单位地址:"  placeholder="请输入委托单位地址"/>
                <van-field label-class='fw'  v-model="form.fdeptaddtx_cus" label="通讯地址:" placeholder="请输入通讯地址"/>
                <van-field label-class='fw'  v-model="form.fdeptzipcode_cus" label="邮编:" placeholder="请输入邮编"/>
                <van-field label-class='fw' type="tel" v-model="form.fdepttel_cus"  label="单位固话:" placeholder="请输入单位固话"/>
                <van-field label-class='fw' v-model="form.fdepperson_cus"  label="经办人:" placeholder="请输入经办人"/>
                <van-field label-class='fw' label-width="120px" type="tel" v-model="form.fdeppersonmob_cus"  label="经办人联系电话:" placeholder="请输入经办人联系电话" />
            </van-cell-group>
        </div>
        <div class='faddContractFooter' v-if="state !='view'">
            <div class='leftBtn4addContract' @click="save">下一步</div>
        </div>
    </div>
</template>

<script>
import {
    searchfcode
    ,insertsamplereport
    ,searchbyid
    ,searchchecktype
    ,updatesamplereport
} from '@/api/addSampleBill'
import { 
    Field
    ,DatetimePicker
    , Popup
    ,Cell
    ,CellGroup
    ,Picker
    ,Toast
} from 'vant';
export default {
    name: 'addContract',
    components: {
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,

    },
    created(){
        this.state = this.$route.query.state
        if(this.state == 'add'){
            this.getCode()
            this.searchtype()
        }else if(this.state == 'edit'){
            this.form.fcontractid = this.$route.query.fsamplereportid
            this.getEdit(this.form.fsamplereportid)
        }else if(this.state == 'view'){
            this.form.fcontractid = this.$route.query.fsamplereportid
            this.getEdit(this.form.fsamplereportid)
        }
    },
    data () {
        return {
            state:'',
            text:'',
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            showTime:false,
            showFdept:false,
            form:{
                fstep:'1',
                fsamplereportcode:'',
                fcontractcode:'',
                fcontractname:'',
                fcontractnid:'',
                fchecktypename:'',
                fchecktypeid:'',
                fdeptname_cus:'',
                fdeptprovince_cus:'',
                fdepttrade_cus:'',
                fdeptadd_cus:'',
                fdeptaddtx_cus:'',
                fdeptzipcode_cus:'',
                fdepttel_cus:'',
                fdepperson_cus:'',
                fdeppersonmob_cus:''
            },
            columns: [
                { text: '客户一',id:'c5f0d33b-ac05-4acd-b8bb-a01226565543'},
                { text: '单位二' },
                { text: '单位三' }
            ],
 
          
        }
    },
    methods:{
        searchtype(){
            searchchecktype().then(res=>{
                console.log(res)
                if(res.isSuccess){
                    this.columns = res.list
                }
            })
        },
        searchColumns(){
            searchforwx().then(res=>{
                if(res.isSuccess){
                    this.columns = res.rows.filter(function(value) {return value.fstate ==1;})
                }
            })
        },
        getEdit(fsamplereportid){
            searchbyid({
                fsamplereportid:fsamplereportid
            }).then(res=>{
                console.log(res)
               
               
            })
        },
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`
            } else if (type === 'day') {
                return `${val}日`
            }
            return val;
        },
 
        save(){
            this.$router.push({path:"/addSampleBill2"});
            return
            this.$validator.validateAll('registerForm').then((valid) => {
                console.log(valid)
                if (valid) {
                    if(this.state == 'add'){
                        insertsamplereport(this.form).then(res=>{
                            if(res.isSuccess){
                                Toast('保存成功');
                                this.$router.push({path:"/"});
                            }
                        })
                    }else if(this.state == 'edit'){ 
                        updatesamplereport(this.form).then(res=>{
                            if(res.isSuccess){
                                Toast('修改成功');
                                this.$router.push({path:"/"});
                            }
                        })
                    }
                }
            })

        },
        getCode(){
            searchfcode({}).then(res=>{
                if(res.isSuccess){
                    console.log(res)
                    this.form.fsamplereportcode = res.object
                }
            })
        },
        showTimeClick(){
            this.showTime = true
        },
        timeConfirm(val){
            this.form.fcontractdate = this.dateToString(val)
            this.showTime = false
        },
        timecancel(){
            this.showTime = false
        },
        showFdeptClick(){
            this.showFdept = true
        },
        onCancel4fdeptname(val){
            this.showFdept = false
        },
        onConfirm4fdeptname(val){
            this.form.fchecktypename = val.fname
            this.form.fchecktypeid = val.fid
            this.showFdept = false
        },
        dateToString(date){ 
            var year = date.getFullYear(); 
            var month =(date.getMonth() + 1).toString(); 
            var day = (date.getDate()).toString();  
            if (month.length == 1) { 
                month = "0" + month; 
            } 
            if (day.length == 1) { 
                day = "0" + day; 
            }
            var dateTime = year + "-" + month + "-" + day;
            return dateTime; 
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.faddContractFooter{
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    height: 40px;
    display: flex;
    flex: 1
}
.leftBtn4addContract{
    line-height: 40px;
    width:100%;
    text-align: center;
    background-color: #07c160;
    color:white;
}
.rightBtn4addContract{
    line-height: 40px;
    width:50%;
    text-align: center;
    background-color: #1989fa;
    color:white;  
}
.fw{
    font-weight: 700
}
.lang{
    width:120px
}
</style>
